import React, { FC, useState } from 'react'
import styles from './index.module.scss'
import { useRequest, useTitle } from 'ahooks'
import { Typography, Empty, Table, Tag, Button, Space, Modal, message } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import { ExclamationCircleFilled } from '@ant-design/icons'
import ListSearch from '../../../components/ListSearch/ListSearch'
import useLoadQuestionListData from '../../../hooks/useLoadQuestionListData'
import { updateQuestionService, deleteQuestionService } from '../../../services/question'

interface DataType {
  _id: string
  title: string
  isStar: boolean
  answerCount: number
  createdAt: string
  isPublished: boolean
}
const { Title } = Typography

const columns: ColumnsType<DataType> = [
  {
    title: '标题',
    dataIndex: 'title',
    align: 'center',
  },
  {
    title: '是否发布',
    dataIndex: 'isPublished',
    align: 'center',
    render: (isPublished: boolean) => {
      return isPublished ? <Tag>已发布</Tag> : <Tag>未发布</Tag>
    },
  },
  {
    title: '答卷',
    dataIndex: 'answerCount',
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    align: 'center',
  },
]
const { confirm } = Modal

const List: FC = () => {
  useTitle('回收站')
  const { data = {}, loading, refresh } = useLoadQuestionListData({ isDeleted: true })
  const { list = [], total = 0 } = data
  // 记录选中的id
  const [selectIds, setSelectIds] = useState<string[]>([])
  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectIds) {
        await updateQuestionService(id, { isDeleted: false })
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess() {
        message.success('恢复成功')
        refresh()
        setSelectIds([])
      },
    }
  )
  // 删除
  const { run: deleteQuestion } = useRequest(async () => await deleteQuestionService(selectIds), {
    manual: true,
    debounceWait: 500,
    onSuccess() {
      message.success('删除成功')
      refresh()
      setSelectIds([])
    },
  })

  function del() {
    confirm({
      title: '确认彻底删除该问卷？',
      content: '删除后无法恢复',
      icon: <ExclamationCircleFilled></ExclamationCircleFilled>,
      onOk: deleteQuestion,
    })
  }

  const TableElem = (
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button type="primary" onClick={recover} disabled={selectIds.length === 0}>
            恢复
          </Button>
          <Button danger onClick={del}>
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        loading={loading}
        rowSelection={{
          type: 'checkbox',
          onChange: selectedRowKey => {
            console.log('selectedRowKey', selectedRowKey)
            setSelectIds(selectedRowKey as string[])
          },
        }}
        rowKey={q => q._id}
        bordered
        dataSource={list}
        columns={columns}
      />
    </>
  )
  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch></ListSearch>
        </div>
      </div>
      <div className={styles.conent}>
        {list.length > 0 ? TableElem : <Empty description="暂无数据"></Empty>}
      </div>
    </>
  )
}
export default List
